<template>
  <div class="top">
     <nav1></nav1>
    <div class="hotsinger">
   
      <div v-show="shows">
        <div class="index1"> 
      <!-- {{hotlist1.tags.index}} -->
         <ul>
          <li v-for="(item,index) in hotlist1.tags.index" :key="index" :class="{active:index==num1}" @click="send1(index)">
            {{item.name}}
          </li>
        </ul>
      </div>
     <div class="genre"> 
        <ul>
          <li v-for="(item,index) in hotlist1.tags.genre" :key="index + '-only1'" :class="{active:index==num2}" @click="send2(index)">
            {{item.name}}
          </li>
        </ul>
      </div> 
      <div class="area">
        <ul>
          <li v-for="(item,index) in hotlist1.tags.area" :key="index + '-only2'" :class="{active:index==num3}" @click="send3(index)">
            {{item.name}}
          </li>
        </ul>
      </div>
      <div class="sex">
        <ul>
          <li v-for="(item,index) in hotlist1.tags.sex" :key="index + '-only3'" :class="{active:index==num4}" @click="send4(index)">
            {{item.name}}
          </li>
        </ul>
      </div>
      </div>
      <div class="singer" v-show="shows">
        <ul class="singer-one">
          <li v-for="(item,index) in hotlist1.singerlist" :key="index">
            <img :src="item.singer_pic" alt="" @click="s(item.singer_mid)">
            <p >{{item.singer_name}}</p>
          </li>
        </ul>
        
      </div> 
      <div class="singer-tow" v-show="shows">
        <ul>
          <li v-for="(item,index) in singer" :key="index" @click="send(item.Fsinger_mid)">
            {{item.Fsinger_name}}
          </li>
        </ul>
      </div>
      <div class="baike">
              <el-input-number v-model="sky" @change="handleChange" :min="1" label="描述文字"></el-input-number>
          </div>
  </div>
  </div>
</template>

<script>
import nav1 from '../../components/nav'
import {hot,singerlist} from '../../api/singerlist'
export default {
  components:{
    nav1
  },
  data(){
    return{
        num1:0,
        num2:0,
        num3:0,
        num4:0,
        hotlist1:[],
        singer:[],
        data:'',
        shows:true,
          sky: 1,
          timer:null
    }
  },
  methods:{
    handleChange(value) {
        this.sky=value
        this. singerlist()
        // console.log(this.sky);
      },
    send1(i){
      this.num1=i
    },
      send2(i){
      this.num2=i
    },
      send3(i){
      this.num3=i
    },
      send4(i){
      this.num4=i
    },
    s(i){
     this.$router.push({
       path:'/singerid',
       query:{
         id:i
       }
     })
   },
    
    send(i){
      this.data=i
      // localStorage.setItem('data',this.data)
      clearTimeout(this.timer)
     
       this.$router.push({
        path:`/singerid`,
        query:{
          singermid:i
        }
      })
       
     
      
     
      
    },
  hotlist(){
   this.axios.get(hot)
    .then(res=>{
    //  console.log(res.data);
     this.hotlist1=res.data.singerList.data
    }).catch(err=>{
      console.log(err);
    })
   },
   singerlist(){
     this.axios.get(`${singerlist}${this.sky}&g_tk=5381&loginUin=0&hostUin=0&format=json&inCharset=utf8&outCharset=utf-8&notice=0&platform=yqq&needNewCode=0`)
     .then(res=>{
       this.singer=res.data.data.list
     }).catch(err=>{
       console.log(err);
     })
   },
   
   
   

  },
  
  created(){
    this.hotlist()
    this. singerlist()
   
    // console.log(url,data);
    
  }
}
</script>

<style lang="scss" scoped>
.active{
  background-color: #2caf6f;
  color: #fff;
}
.hotsinger{
  width:1400px;
  margin: 100px auto;
  
 
  .index1{
     
      ul{
        width: 1400px;
            margin-top: 20px;
       
    display: flex;
    
     flex-wrap: wrap;
    li{
   width: 60px;
    height: 25px;
   
     text-align: center;
     line-height: 25px;
    
     
     
    }
       }
  }
  .baike{
    width: 150px;
    margin: 30px auto;
  }
  .area{
    width: 1000px;
      ul{
         margin-top: 20px;
        
    display: flex;
     
    li{
    width: 60px;
    height: 20px;
  margin-right: 30px;
     height: 25px;
     text-align: center;
     line-height: 25px;
    
     
     
    }
       }
  }
  .sex{
    width: 500px;
       ul{
             margin-top: 20px;
       
    display: flex;
   
    li{
       width: 60px;
    height: 20px;
  margin-right: 30px;
     height: 25px;
     text-align: center;
     line-height: 25px;
    
     
     
    }
       }
  }
  .genre{
    width: 1200px;
    
     ul{
        
    display: flex;
    
     margin-top: 20px;
    li{
       width: 60px;
    height: 20px;
    margin-right: 30px;
     height: 25px;
     text-align: center;
     line-height: 25px;
    
     
     
    }
       }
  }
  .singer{
    .singer-one{
      width: 1400px;
      margin: 0 auto;
      height: 348px;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      overflow: hidden;
      margin-top: 50px;
      li{
        width: 200px;
        p{
          margin-left: 50px;
        }
        img{
          border-radius: 50%;
        }
      }
    }
  }
  .singer-tow{
   
    ul{
       width: 1400px;
    flex-wrap: wrap;
    margin: 0 auto;
    justify-content: space-between;
    display: flex;
    // margin-top: 50px;
    li:hover{
        color: #ffe443;
      }
      li{
        font-size: 15px;
        width: 100px;
        // height: 50px;
        text-align: center;
        // overflow: hidden;
        // text-overflow: ellipsis;
        white-space: nowrap;
      margin-right: 140px;
      margin-top: 40px;
      
      // border: 1px solid #ccc;
      // line-height: 140px;
     
    }
    }
    
  }
}
</style>